<template>
  <div class="tomato">
    <!-- <div class="return-btn">
      <button @click="myReturn"></button>
    </div> -->
    <div class="content">
      <div class="status">{{ status }}</div>
      <div :class="['big-box', aa == true ? 'active' : '']"></div>
      <div class="small-box">
        <span>{{ timeStr }}</span>
      </div>
    </div>
    <div class="close-box">
      <button @click="myStop">{{ str }}</button>
    </div>
    <div class="mask" v-if="!start">
      <div class="tip">
        <div class="tit">
          <p>{{myStopTime}}</p>
        </div>
        <div class="form">
          <button @click="mySure">结束</button>
          <button @click="myClose">继续</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tomato",
  data() {
    return {
      start: true,
      option: {},
      timeStr: "00:00",
      timer: null,
      sec: 0,
      str: "暂停",
      status: "专注中...",
      aa: false,
      myStopTime:"已暂停专注",
      time:0,
      num:0
    };
  },
  methods: {
    autoplay() {
      //   console.log(this.sec);
      let mm = Math.floor((this.sec % 3600) / 60);
      let ss = Math.floor(this.sec % 60);

      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      this.timeStr = `${mm}:${ss}`;

      this.sec--;
      this.time++;
      // console.log(this.num - 1);
      if(this.sec <0 ){
        
          clearInterval(this.timer)
          
          this.status = "专注结束"
          this.timeStr = "00:00"
          this.str = "退出"
          this.aa = false;
          this.myStopTime = "专注已结束!"
          this.start = !this.status;
      }
    },
    myStop() {
      if (this.start) {
        this.start = !this.start;
        clearInterval(this.timer);
        this.status = "暂停中...";
        this.aa = false;
        return;
      } 
      // else {
      //   alert("请重新选择专注时间");
      //   return false;
      // }
    },
    myReturn() {
        clearInterval(this.timer);
      this.$router.push({ path: "/home" });
    },
    mySure() {
      clearInterval(this.timer)
      this.num++;
      this.$router.push({ path: "/home" });
      localStorage.setItem("totalTime",this.time-1)
      localStorage.setItem("totalNum",this.num)
    },
    myClose() {
      this.status = "专注中...";
      this.start = !this.start;
      this.aa = true;
      this.timer = setInterval(() => {
        this.autoplay();
      }, 1000);
    },
  },
  mounted() {
    
    let aa = localStorage.getItem("totalTime");
    this.time = aa;


    let bb = localStorage.getItem("totalNum");
    this.num = bb;
    this.sec = this.$route.query.time;
    // console.log(this.sec);

    this.autoplay();
    setTimeout(() => {
      this.timer = setInterval(() => {
        this.autoplay();
      }, 1000);
      this.aa = true;
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
.tomato {
  width: 100%;
  .return-btn {
    width: 100%;
    button {
      background-color: transparent;
      position: relative;
      left: 20px;
      width: 20px;
      height: 20px;
      &::after,
      &::before {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-top: 8px solid #000;
        position: absolute;
        top: 0;
        left: 0px;
      }
      &::after {
        border-top: 8px solid #fff;
        top: -3px;
      }
    }
  }
  .content {
    width: 100%;
    height: 550px;
    padding-top: 150px;
    box-sizing: border-box;
    position: relative;
    .status {
      width: 100%;
      text-align: center;
      margin-top: -40px;
      color: #606060;
    }
    .big-box {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background-color: #f8bdcf;
      margin: 60px auto;
      padding-top: 57px;
      box-sizing: border-box;
    }
    .small-box {
      width: 130px;
      height: 130px;
      line-height: 130px;
      border-radius: 50%;
      background-color: #fa7296;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -65px;
      margin-left: -65px;
      span {
        color: white;
        font-size: 28px;
      }
    }
  }
  .close-box {
    width: 100%;
    height: 40px;
    button {
      display: block;
      padding: 15px 50px;
      border-radius: 25px;
      margin: 0 auto;
      border: 1px solid #ccc;
      background-color: transparent;
      color: #606060;
      font-size: 16px;
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    .tip {
      width: 80%;
      border-radius: 15px;
      background-color: #fff;
      position: absolute;
      top: 35%;
      left: 40px;
      p {
        text-align: center;
        font-size: 22px;
        color: #606060;
        margin: 30px 20px;
      }
      .form {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px;
        button {
          display: inline-block;
          font-size: 18px;
          color: #606060;
          background-color: transparent;
          margin: 0 10px;
        }
      }
    }
  }
}
@keyframes myDonghua {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.6);
    opacity: 0.2;
  }
}
.active {
  animation: myDonghua 1s ease-out infinite;
}
</style>